<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <!--    引入外部js-->
    <script src="./js/jquery.js" type="text/javascript"></script>
</head>
<body>

    <output id="mess"></output>
    <div>
        <label>用户名</label>
        <input id="username" placeholder="请输入帐号信息"/>
    </div>
    <div>
        <label>密码</label>
        <input id="password" type="password" placeholder="请输入密码信息"/>
    </div>
    <div>
        <button onclick="accessAuthCenter()">登陆</button>
    </div>

<script>

    let accessAuthCenter = function () {

        let username = $("#username").val();
        let password = $("#password").val();

        //导入类库  (yarn npm pnpm)  手工
        // ajax 可以向后台发起请求 (jq : js 框架)
        $.ajax({
            //请求方式
            method: "post",
            //请求方法地址
            url: "/usercenter/admin/login",
            //向后台传递的参数
            data: {
                username: username,
                password: password
            },
            //后台方法返回信息的接收  result 表示后台传递给前端的値 回调方法
            success: function (result) {
                let jsonData = result;
                //把后台的json字符串
                // {code:200,msg:"sucesss",data:'jdfslkjfkls8q3891sjlkfjlskji2.'}
                console.info(jsonData)
                if (jsonData.code === 200) {
                    //把收到的token存储到页面里
                    // js 页面缓存里 localstorge(页面本地缓存  不清除缓存一直存在)
                    // sessionstrge(页面级缓存，关闭页面自动消失) cookies
                    localStorage.setItem('token', jsonData.data);
                    //跳转页面到 main.html
                    location.href = "main.html";

                } else {
                    $("#mess").text(jsonData.msg);
                    $("#username").val("");
                    $("#password").val("");
                }
            }
        });

    }
    // 1方法承载体 事件
    // 2被调用对象

    //3 做什么   把用户名与密码提交后台
</script>


</body>
</html>